<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navigate(new)</title>
</head>
<link  href="CSS/Navigate(new).css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="navigate">
	<ul id="list">
		<li><a href="#">Call of Duty</a></li>
		<li><a href="#">EVE</a></li>
		<li><a href="#">SC2</a>
			<ul>
				<li><a href="#">Protoss</a></li>
				<li><a href="#">Terran</a></li>
				<li><a href="#">Zerg</a></li>
				
			</ul>
		</li>
		<li><a href="#">FIFA</a></li>
		<li><a href="#">WOW</a>
			<ul>
				<li><a href="#">Hero</a></li>
				<li><a href="#">Raid</a>
					<ul>
						<li><a href="#">The Battle of Mount Hyjal</a></li>
						<li><a href="#">Gruul's Lair</a></li>
						<li><a href="#">Magtheridon's Lair</a></li>
						<li><a href="#">Serpentshrine Cavern</a></li>
					</ul>
				</li>
			</ul>
			</a> </li>
		<li><a href="#">CIV</a></li>
	</ul>
</div>
</body>
</html>
<script type="text/javascript">
window.onload=test;
function test(){
  var oUl=document.getElementById('list').getElementsByTagName("ul");
    for (var t=0; t<oUl.length; t++){
		oUl[t].parentNode.getElementsByTagName("a")[0].className="haveSub";
		oUl[t].parentNode.onmouseover=function(){
			this.getElementsByTagName("ul")[0].style.display="block";
		}
		oUl[t].parentNode.onmouseout=function(){
			this.getElementsByTagName("ul")[0].style.display="none";
		}
    }
}
</script>
